import React, { Component, createRef } from 'react'
import { Input, Button, Table, Pagination} from 'antd'
import { userListApi } from '../../apis/userApi'

 class UserList extends Component {
state = {
    searchValue: '',
    columns: [
        {align: 'center', dataIndex: 'id', ellipsis:true, title: '用户编码', width: 100, fixed: 'left' },
        {dataIndex: 'name', title: '用户姓名' , width:120, key: 'opt'},
        {dataIndex: 'dept', title: '所属部门' , width:120, key: 'opt'},
        {dataIndex: 'duties', title: '职位' , width:120, key: 'opt'},
        {dataIndex: 'address', title: '地址' , width:260, ellipsis:true},
        {dataIndex: 'remark', title: '备注' , width:120, key: 'opt'},
        {key: 'opt', title: '操作', width: 120,fixed: 'right', render: row => {
            
            return (
                <>
                    <span className="table-link" onClick={this.editEvt.bind(this,row)}>编辑</span>
                    
                     {/*  函数组件写法<span onClick={editEvt.bind(null, row)} className="table-link">编辑</span> */}
                        {/* 函数组件写法<span onClick={function() {editEvt(row)}} className="table-link">编辑</span> */}
                    <span className="table-link">删除</span>
                </>
            )
        }}
    ],
    data: [],
    loading: true,
    contentNode: createRef(),
    tableHeight: 200,
    total: 0,
    current: 1,
    pageSize: 20
}
componentDidMount() {
    this.setState({tableHeight: this.state.contentNode.current.clientHeight - 63})
    this.getUserList()
}

async getUserList() {
    let result = await userListApi({
        page: this.state.current,
        size: this.state.pageSize,
        name: this.state.searchValue,
        id: this.state.searchValue
    })
    this.setState({loading: false})
    if(result.code !== 200) return
    
    this.setState({
        data: result.data.rows,
        total: result.data.total
    })

 }
 pagingEvent(current, pageSize) {
    this.setState({loading: true,current, pageSize}, () => {
        this.getUserList()
    })
 }
 queryEvent(){
    this.setState({loading: true,current:1, pageSize:20}, () => {
        this.getUserList()
    })
 }
 editEvt(row) {
    console.log(row.id)
}
    render() {
        return (
            <div className="content-container ">
                <header>
                    <Input  value={this.state.searchValue} 
                    onChange={e => {this.setState({searchValue: e.target.value}) }}
                    placeholder="请输入姓名或编码"
                    />
                    <Button type="primary" onClick={this.queryEvent.bind(this)}>查询</Button>
                    <Button type="primary">新增</Button>
                </header>
                <article ref={this.state.contentNode}>
                    <Table columns={this.state.columns} 
                        loading={this.state.loading}
                        size="middle"
                        pagination={false}
                        scroll={{y:this.state.tableHeight}}
                    dataSource={this.state.data} />
                </article>
                <footer>
                    <Pagination size="small"
                    total={this.state.total}
                    showSizeChanger
                    current={this.state.current}
                    pageSize={this.state.pageSize}
                    pageSizeOptions={[20, 30, 50, 100, 150]}
                    onChange={this.pagingEvent.bind(this)}
                    onShowSizeChange={this.pagingEvent.bind(this)}
                    showTotal={total => `共 ${total} 条数据`}/>                
                </footer>
            </div>
        )
    }
}

export default UserList